<template>
  <a-modal
    :visible="visible"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    ref="modal"
    @ok="handleOk"
    @cancel="closeModal()"
    width="1250px"
  >
    <a-tabs :default-active-key="tabKey" @change="callback" :forceRender="true">
      <!-- 图库 -->
      <a-tab-pane key="1" tab="图库">
        <search-table
          :url="galleryUrl"
          ref="searchtable1"
          :columns="galleryColumns"
          :form="galleryForm"
          :defaultParams="{ galleryProductType: 0 }" 
          style="margin-top: 20px"
          @dataSourceChange="galleryList"
        >
          <template slot="searchForm">
            <a-form layout="inline" :form="galleryForm">
              <a-form-item label="产品名称">
                <a-input
                  v-decorator="[
                    'galleryProductName',
                  ]"
                  placeholder="请输入产品名称"
                >
                </a-input>
              </a-form-item>
              <a-form-item label="是否展示">
                <a-select
                  style="width: 150px"
                  :options="enableShowOptions"
                  v-decorator="['enableShow']"
                  placeholder="选择是否展示"
                />
              </a-form-item>
              <a-form-item label="是否为新品">
                <a-select
                  style="width: 150px"
                  :options="enableNewOptions"
                  v-decorator="['enableNew']"
                  placeholder="是否为新品"
                />
              </a-form-item> 
              <a-form-item label="图库所属">
                <a-select style="width: 180px" v-decorator="[
                    'galleryProductType',
                    {
                      initialValue: 0
                    }
                  ]"  
                  placeholder="请选择" 
                  :options="ownershipList">
                </a-select>
              </a-form-item> 
            </a-form>
          </template>
        </search-table>
      </a-tab-pane>
      <!-- 案例 -->
      <a-tab-pane key="2" tab="案例">
        <search-table 
          :url="caseUrl" 
          ref="searchtable2" 
          :columns="caseColumns" 
          :form="caseForm" 
          :defaultParams="{ caseProductType: 0 }">
          <template slot="searchForm">
            <a-form layout="inline" :form="caseForm">
              <a-form-item label="案例名称">
                <a-input
                  v-decorator="[
                    'caseProductName',
                  ]"
                  placeholder="请输入案例名称"
                >
                </a-input>
              </a-form-item>      
              <a-form-item label="是否展示">
                <a-select
                  style="width: 150px"
                  :options="enableShowOptions"
                  v-decorator="['enableShow']"
                  placeholder="选择是否展示"
                />
              </a-form-item>
              <a-form-item label="是否为新品">
                <a-select
                  style="width: 150px"
                  :options="enableNewOptions"
                  v-decorator="['enableNew']"
                  placeholder="是否为新品"
                />
              </a-form-item>  
              <a-form-item label="案例所属">
                <a-select style="width: 180px" v-decorator="[
                    'caseProductType',{
                      initialValue:0
                    }
                  ]"  placeholder="请选择" :options="ownerCaseList">
                </a-select>
              </a-form-item> 
            </a-form>
          </template>
        </search-table>
      </a-tab-pane>
      <!-- 视频 -->
      <a-tab-pane key="3" tab="视频">
        <search-table
          :url="videoUrl"
          ref="searchtable3"
          :columns="videoColumns"
          :form="videoForm"
          :xLength="800"
        >
          <template slot="searchForm">
            <a-form layout="inline" :form="videoForm">
              <a-form-item label="视频标题">
                <a-input
                  style="width: 200px"
                  v-decorator="['title']"
                  placeholder="请输入视频标题"
                >
                </a-input>
              </a-form-item>
              <a-form-item label="视频标签名称">
                <a-input
                  style="width: 200px"
                  v-decorator="['label']"
                  placeholder="请输入视频标签名称"
                >
                </a-input>
              </a-form-item>
              <a-form-item label="视频状态">
                <a-select
                  style="width: 150px"
                  :options="sendStatus"
                  v-decorator="['sendStatus', { initialValue: '' }]"
                  placeholder="请选择视频状态"
                />
              </a-form-item>
              <a-form-item label="视频所属">
                <a-select
                  style="width: 200px"
                  :options="
                    shopRoleCode == 'role:store:main' ? videoList : videoList2
                  "
                  v-decorator="['shopType', { initialValue: 1 }]"
                  placeholder="请选择视频所属"
                />
              </a-form-item>
            </a-form>
          </template>
          <template slot="statusTable" slot-scope="{ record }">
            <span class="platform" v-if="record.platform.indexOf('1') > -1"
              >APP</span
            >
            <span class="platform" v-if="record.platform.indexOf('2') > -1"
              >小程序</span
            >
            <span class="platform" v-if="record.platform.indexOf('3') > -1"
              >TV大屏</span
            >
          </template>
        </search-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
import { mapState } from "vuex";
import { showPlatformList } from '@/utils/dictData'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      tabKey: '1',
      // 图库
      galleryUrl: "/gallery/product/page",
      galleryForm: this.$form.createForm(this, { name: 'table_search1' }),
      galleryList: [],
      galleryColumns: [
        {
          title: '产品图片',
          dataIndex: 'largeScreenPicture',
          key: 'largeScreenPicture',
          align: 'center',
          customRender: (text, row) => {
            return <table-img src={text}/>
          }
        },
        {
          title: '产品名称',
          dataIndex: 'galleryProductName',
          key: 'galleryProductName',
          align: 'center'
        },
        {
          title: '所属分类',
          dataIndex: 'galleryClassificationName',
          key: 'galleryClassificationName',
          align: 'center'
        },
        {
          title: '展示平台',
          dataIndex: 'exhibitionPlatform',
          key: 'exhibitionPlatform',
          align: 'center',
          customRender: (text, row) => {
            let arr = text && text.split(',')
            let tmpData = []
            arr.forEach(val => {
              tmpData.push(this.getPlatformName(val))
            })
            return tmpData.join('/')
          }
        },
        {
          title:'是否展示',
          dataIndex:'enableShow',
          key:'enableShow',
          align: 'center',
          customRender: (text, record) => {
            return text == 1 ? '是' : '否'
          },
        },
        {
          title:'是否为新品',
          dataIndex:'enableNew',
          key:'enableNew',
          align: 'center',
          customRender: (text, record) => {
            return text == 1 ? '是' : '否'
          }
        },
      ],
      enableShowOptions: [
        {label: '是', value: '1'},
        {label: '否', value: '0'}
      ],
      enableNewOptions: [
        {label: '是', value: '1'},
        {label: '否', value: '0'}
      ],
      ownershipList:[
        {
          label:'本店图库',
          value:0,
        },{
          label:'其他图库',
          value:1,
        }
      ],
      ownerCaseList:[
        {
          label:'本店案例',
          value:0,
        },{
          label:'其他案例',
          value:1,
        }
      ],
      // 案例
      caseUrl: "/cases/product/page",
      caseForm: this.$form.createForm(this, { name: 'table_search2' }),
      caseList: [],
      caseColumns: [
        {
          title: '产品图片',
          dataIndex: 'largeScreenPicture',
          key: 'largeScreenPicture',
          align: 'center',
          customRender: (text, row) => {
            console.log('text', text)
            return <table-img src={text}/>
          }
        },
        {
          title: '产品名称',
          dataIndex: 'caseProductName',
          key: 'caseProductName',
          align: 'center'
        },
        {
          title: '所属分类',
          dataIndex: 'casesClassificationName',
          align: 'center',
          key: 'casesClassificationName'
        },
        {
          title: '展示平台',
          dataIndex: 'exhibitionPlatform',
          align: 'center',
          key: 'exhibitionPlatform',
          customRender: (text, row) => {
            let arr = text && text.split(',')
            let tmpData = []
            arr.forEach(val => {
              tmpData.push(this.getPlatformName(val))
            })
            return tmpData.join('/')
          }
        },
        {
          title:'是否展示',
          dataIndex:'enableShow',
          align: 'center',
          key:'enableShow',
          customRender: (text, record) => {
            return text == 1 ? '是' : '否'
          }
        },
        {
          title:'是否推荐',
          dataIndex:'enableRecommend',
          align: 'center',
          key:'enableRecommend',
          customRender: (text, record) => {
            return text == 1 ? '是' : '否'
          }
        }
      ],
      // 视频
      videoUrl: "/video/page",
      videoForm: this.$form.createForm(this, { name: 'table_search3' }),
      videoList: [],
      videoColumns: [
        {
          title: "视频标题",
          dataIndex: "title",
          key: "title",
          align: "center",
        },
        {
          title: "视频封面图",
          dataIndex: "pictureUrl",
          key: "pictureUrl",
          align: "center",
          width: "120px",
          customRender: (text, row) => {
            return <table-img src={text} />;
          },
        },
        {
          title: "视频标签",
          dataIndex: "ImgTextOperation",
          key: "ImgTextOperation",
          width: "200px",
          align: "center",
          scopedSlots: { customRender: "ImgTextOperation" },
        },
        {
          title: "发布平台",
          dataIndex: "statusTable",
          align: "center",
          scopedSlots: { customRender: "statusOperation" },
          width: "150px",
        },
        {
          title: "是否已发布",
          dataIndex: "sendStatusTable",
          align: "center",
          customRender: (text, row) => {
            return text == 1 ? '是' : '否'
          },
        }
      ],
      sendStatus: [
        { label: "全部", value: "" },
        { label: "未发布", value: 1 },
        { label: "已发布", value: 2 },
      ],
      videoList: [
        { label: "本店视频", value: 1 },
        { label: "其它店视频", value: 2 },
      ],
      videoList2: [{ label: "本店视频", value: 1 }],
    };
  },
  created() {},
  computed: {
    ...mapState({
      shopRoleCode: (state) => state.userInfo.shopRoleCode || "",
    }),
  },
  methods: {
    closeModal() {
      this.$emit("cancel");
    },
    handleOk() {
      let productList = [], types = ['1', '2', '3']; //产品类型 1图库，2案例，3视频
      types.forEach(type => {
        let key = `searchtable${type}`;
        if(this.$refs[key] && this.$refs[key].selectedRowKeys.length > 0) {
          let selectedRows = this.$refs[key].$data.selectedRows;
          selectedRows.forEach(item => {
            productList.push({
              productId: item.id,
              productType: type,
              productName: type == 1 ? item.galleryProductName : (type == 2 ? item.caseProductName : item.title)
            })
          })
        }
      })
      console.log(productList)
      if(productList.length == 0) {
        return this.$message.warn('请至少选择一项后再进行操作')
      }
      this.$emit("getProductList", productList)
    },
    callback(val) {
      console.log(val)
    },
    // 通过value展示名
    getPlatformName (value) {
      return showPlatformList.map(item => {
        if (item.value == value) {
          return item.label
        }
      }).filter(item => {
        return item
      })
    }
  },
};
</script>
